<template>
	<view class="editPassword">
		<!-- 新密码和旧密码 -->
		<view class="mm_input">
			<view class="password">
				<view class="mm_left">
					旧密码
				</view>
				<view class="mm_right">
					<input placeholder="请输入旧密码" :password="data.show1" v-model="data.oldPassword" />
				</view>
				<view class="mm_icon" @click="changePassword(1)">
					<uni-icons type="eye-slash" size="28" v-if="data.show1"></uni-icons>
					<uni-icons type="eye" size="28" v-else></uni-icons>
				</view>
			</view>
			<view class="password">
				<view class="mm_left">
					新密码
				</view>
				<view class="mm_right">
					<input placeholder="请输入新密码" :password="data.show2" v-model="data.newPassword" />
				</view>
				<view class="mm_icon" @click="changePassword(2)">
					<uni-icons type="eye-slash" size="28" v-if="data.show2"></uni-icons>
					<uni-icons type="eye" size="28" v-else></uni-icons>
				</view>
			</view>
			<view class="password">
				<view class="mm_left">
					确认密码
				</view>
				<view class="mm_right">
					<input placeholder="请再次输入密码" :password="data.show3" v-model="data.againPassword" />
				</view>
				<view class="mm_icon" @click="changePassword(3)">
					<uni-icons type="eye-slash" size="28" v-if="data.show3"></uni-icons>
					<uni-icons type="eye" size="28" v-else></uni-icons>
				</view>
			</view>
		</view>
		<!-- 确认按钮 -->
		<view class="buttn-submit">
			<button @click="submit">确认修改</button>
		</view>
	</view>
</template>

<script setup>
	import {
		updatePassword
	} from '../../api/api.js'
	import {
		reactive
	} from 'vue'
	const data = reactive({
		oldPassword: '',
		newPassword: '',
		againPassword: '',
		show1: true,
		show2: true,
		show3: true
	})

	// 修改密码显示
	const changePassword = (num) => {
		if (num == 1) {
			data.show1 = !data.show1
			return
		}
		if (num == 2) {
			data.show2 = !data.show2
			return
		}
		if (num == 3) {
			data.show3 = !data.show3
			return
		}
	}
	const submit = async () => {
		if (data.newPassword != data.againPassword) {
			uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			})
			return
		}
		await updatePassword({
			oldPassword: data.oldPassword,
			newPassword: data.newPassword
		}).then(res => {
			console.log(res);
			if (res.ok == 1) {
				data.againPassword = ''
				data.newPassword = ''
				data.oldPassword = ''
				uni.showToast({
					title: '修改成功',
					icon: 'none',
				})
			}
			setTimeout(() => {
				uni.navigateBack({
					delta:1
				})
			}, 500)
		})

	}
</script>

<style lang="scss" scoped>
	.editPassword {
		padding: 20rpx;
		box-sizing: border-box;

		.mm_input {
			.password {
				display: flex;
				margin-top: 20rpx;

				.mm_left {
					text-align: center;
					flex: 0.7;
					line-height: 100rpx;
				}

				.mm_right {
					flex: 1.5;

					input {
						width: 100%;
						height: 100%;
					}
				}

				.mm_icon {
					flex: 0.5;
					text-align: center;
					line-height: 100rpx;
				}
			}
		}

		.buttn-submit {
			margin-top: 30rpx;
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			button {
				width: 80%;
				height: 100%;
				color: #fff;
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
				background-color: #ef5478;
			}
		}
	}
</style>